<template>
  <!-- 先出去, 再进来 -->
  <transition mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
/*
  v-enter 在组件进入之前加的类名
  v-enter-active 在组件正在进来时加的类名
  v-enter-to 组件进入到最终的目的地加的类名
  剩下三个与之对应的是离开
*/
.v-leave, .v-enter-to {
  opacity: 1;
  transform: translate(0);
}

.v-leave-active, .v-enter-active {
  transition: all .3s;
}

.v-enter {
  opacity: 0;
  transform: translate(-100%);
}

.v-leave-to {
  opacity: 0;
  transform: translate(100%);
}

</style>
